<template>
	<view class="content">
		<view class="card" v-if="cardInfo.id">
			<template v-if="cardInfo.ifEmployed == 1">
				<image class="card-bg" src="https://zhaoshixi.oss-cn-shanghai.aliyuncs.com/common/card-bg.png"></image>
				<view class="base-info" id="base-info">
					<view class="row-align">
						<text class="name">{{cardInfo.name}}</text>
						<text class="ml-20"> - {{cardInfo.postName}}</text>
					</view>
					<view class="line"></view>
					<view class="row-align">
						<text class="yzb yzb-gongsi"></text>
						<text class="ml-20">{{cardInfo.companyName}}</text>
					</view>
					<view class="row-align">
						<text class="yzb yzb-dianhua1"></text>
						<text class="phone ml-20">{{cardInfo.phone}}</text>
					</view>
				</view>
				<view class="card-item pt-20">
					<text class="title">行业领域</text>
					<text>{{cardInfo.industry || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">主营业务</text>
					<text>{{cardInfo.mainBusiness || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">愿景</text>
					<text>{{cardInfo.vision || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">人生格言</text>
					<text>{{cardInfo.motto || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">近期重点工作</text>
					<text>{{cardInfo.recentWork || '未填写'}}</text>
				</view>
			</template>
			<template v-else>
				<image class="card-bg" src="https://zhaoshixi.oss-cn-shanghai.aliyuncs.com/common/card-bg.png"></image>
				<view class="base-info" id="base-info">
					<view class="row-align">
						<text class="name">{{cardInfo.name}}</text>
						<text class="ml-20"> - {{cardInfo.major}}</text>
					</view>
					<view class="line"></view>
					<view class="row-align">
						<text class="yzb yzb-gongsi"></text>
						<text class="ml-20">{{cardInfo.school}}</text>
						<!-- <text class="ml-20">{{cardInfo.major}}</text> -->
					</view>
					<view class="row-align">
						<text class="yzb yzb-dianhua1"></text>
						<text class="phone ml-20">{{cardInfo.phone}}</text>
					</view>
				</view>
				<view class="card-item">
					<text class="title">兴趣</text>
					<text>{{cardInfo.interest || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">成果</text>
					<text>{{cardInfo.achievement || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">人生格言</text>
					<text>{{cardInfo.motto || '未填写'}}</text>
				</view>
				<view class="card-item">
					<text class="title">近期钻研方向</text>
					<text>{{cardInfo.recentResearch || '未填写'}}</text>
				</view>
			</template>
		</view>
		<view v-else>
			<m-empty-data :coverUrl="no_order_1" noTxt="暂无名片信息"></m-empty-data>
		</view>
		<view class="bottom" v-if="isMy">
			<button  class="btn" @click="toEdit">编辑</button>
			<button  open-type="share" class="btn-share">分享</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				cardInfo: {},
				id: '',
				isMy:false,
				no_order_1: this.$mAssetsPath.no_order_1,
			}
		},

		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.isMy=false;
			}else{
				this.isMy=true;
			}
			// this.getCardDetail();
			this.$AppEntryController.referrerController(options);
		},
		
		onShow() {
			this.getCardDetail();
		},

		methods: {
			async getCardDetail() {
				let params = {
					id: this.id
				}
				let re = await this.$apis.getCardDetail(params);
				if (re != true) {
					console.log("re===", re);
					this.cardInfo = re;
					this.id = re.id;
				}
			},

			toEdit() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.card,
				});
			},

			onShareAppMessage: function(e) {
				console.log('点击分享', e.from);
				let path = '/pages/user/card/cardDetail?id=' + this.id + "&referrer=" + this.userInfo.id;
				return {
					title: this.cardInfo.name + "的名片",
					path: path,
					// imageUrl: '/static/logo.png'
				};
			},

			onShareTimeline(res) {
				console.log(res);
				let path = '/pages/user/card/cardDetail?id=' + this.id + "&referrer=" + this.userInfo.id;
				return {
					title: this.cardInfo.name + "的名片",
					path: path,
					// imageUrl: '/static/logo.png'
				};
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.content{
		padding-bottom: 100upx;
	}

	.card {
		margin: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20upx;
	}

	.row-align {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ml-20 {
		margin-left: 20upx;
	}
	
	.pb-20{
		padding-bottom: 20upx;
	}
	
	.pt-20{
		padding-top: 20upx;
	}
	
	.card-bg{
		box-sizing: border-box;
		position: absolute;
		width: 710upx;
		height: 300upx;
		z-index: 0;
	}

	.base-info {
		display: flex;
		flex-direction: column;
		z-index: 1;
		height: 300upx;
		padding: 40upx 20upx 20upx 20upx;
		box-sizing: border-box;
		.name {
			font-weight: bold;
			font-size: 40upx;
			z-index: 1;
		}
		.line{
			width: 100%;
			background-color: #eee;
			height: 5upx;
			z-index: 1;
			margin: 25upx 0;
		}
		text{
			z-index: 1;
		}
	}

	.card-item {
		margin-top: 30upx;
		padding: 0 20upx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 32upx;
			font-weight: bold;
			padding: 10upx 0;
		}
	}
	
	.bottom{
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0upx;
		width: 100%;
		.btn{
			background-color: $main-color;
			color: #fff;
			border-radius: 0;
			width: 50%;
		}
		.btn-share{
			background-color: #f0ad4e;
			color: #fff;
			border-radius: 0;
			width: 50%;
		}
	}
	
</style>